
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #1a1f2d, #0c1445);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        
        #paddle {
            width: 100px;
            height: 30px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 15px;
            box-shadow: 0 0 15px #00f7ff, inset 0 0 10px rgba(255,255,255,0.5);
            cursor: pointer;
            z-index: 10;
        }
        
        .projectile {
            position: absolute;
            width: 8px;
            height: 20px;
            background: linear-gradient(to top, #ff9966, #ff5e62);
            border-radius: 4px;
            box-shadow: 0 0 8px #ff7700;
            z-index: 5;
        }
        
        .enemy {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, #ff416c, #ff4b2b);
            box-shadow: 0 0 15px #ff0000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0,0,0,0.8);
        }
        
        .explosion {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, #ffff00, #ff7700);
            animation: explode 0.5s forwards;
        }
        
        @keyframes explode {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(3); opacity: 0; }
        }
        
        #score-display {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 28px;
            color: #4facfe;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(79, 172, 254, 0.7);
            z-index: 10;
        }
        
        #restart-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 12px 25px;
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 18px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(255,75,43,0.4);
            font-weight: bold;
            z-index: 10;
            transition: transform 0.2s;
        }
        
        #restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255,75,43,0.6);
        }
        
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 15, 35, 0.9);
            padding: 40px;
            border-radius: 25px;
            text-align: center;
            display: none;
            box-shadow: 0 0 40px rgba(0, 247, 255, 0.5);
            border: 2px solid #00f7ff;
            z-index: 100;
            width: 80%;
            max-width: 500px;
        }
        
        #game-over h2 {
            color: #ff416c;
            font-size: 36px;
            margin-bottom: 10px;
            text-shadow: 0 0 15px rgba(255,65,108,0.7);
        }
        
        #final-score {
            color: #4facfe;
            font-size: 48px;
            display: block;
            margin: 20px 0;
            text-shadow: 0 0 15px rgba(79,172,254,0.7);
        }
        
        #play-again-btn {
            padding: 15px 40px;
            background: linear-gradient(to right, #00cdac, #02aab0);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 20px;
            cursor: pointer;
            margin-top: 20px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(2,170,176,0.4);
            transition: transform 0.2s;
        }
        
        #play-again-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(2,170,176,0.6);
        }
        
        #health-bar {
            position: absolute;
            top: 70px;
            left: 20px;
            height: 25px;
            width: 200px;
            background: rgba(0,0,0,0.5);
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid #4facfe;
        }
        
        #health-fill {
            height: 100%;
            width: 100%;
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            transition: width 0.3s;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score-display">得分: 0</div>
        <div id="health-bar">
            <div id="health-fill"></div>
        </div>
        <div id="paddle"></div>
        <button id="restart-btn">重新开始</button>
        
        <div id="game-over">
            <h2>战机坠毁!</h2>
            <p>最终得分: <span id="final-score">0</span></p>
            <button id="play-again-btn">再战一场</button>
        </div>
    </div>

    <script>
        // 游戏配置
        const config = {
            paddleWidth: 100,
            paddleHeight: 30,
            enemySize: 50,
            projectileSpeed: 10,
            enemySpeed: 2,
            enemySpawnInterval: 1000,
            maxEnemies: 10,
            maxProjectiles: 5,
            health: 100
        };
        
        // 游戏状态
        let score = 0;
        let health = config.health;
        let enemies = [];
        let projectiles = [];
        let gameActive = true;
        let animationId;
        let spawnTimer;
        let lastShot = 0;
        let shotCooldown = 250;
        
        // DOM元素
        const gameContainer = document.getElementById('game-container');
        const paddle = document.getElementById('paddle');
        const scoreDisplay = document.getElementById('score-display');
        const healthFill = document.getElementById('health-fill');
        const restartBtn = document.getElementById('restart-btn');
        const gameOverScreen = document.getElementById('game-over');
        const finalScoreDisplay = document.getElementById('final-score');
        const playAgainBtn = document.getElementById('play-again-btn');
        
        // 初始化游戏
        function initGame() {
            // 重置游戏状态
            score = 0;
            health = config.health;
            gameActive = true;
            scoreDisplay.textContent = `得分: ${score}`;
            healthFill.style.width = '100%';
            
            // 清除所有元素
            enemies.forEach(enemy => enemy.element.remove());
            projectiles.forEach(projectile => projectile.element.remove());
            enemies = [];
            projectiles = [];
            
            // 隐藏游戏结束界面
            gameOverScreen.style.display = 'none';
            
            // 开始游戏循环
            gameLoop();
            
            // 开始生成敌机
            spawnTimer = setInterval(generateEnemy, config.enemySpawnInterval);
        }
        
        // 生成敌机
        function generateEnemy() {
            if (!gameActive || enemies.length >= config.maxEnemies) return;
            
            const enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.width = `${config.enemySize}px`;
            enemy.style.height = `${config.enemySize}px`;
            
            // 设置敌机符号
            enemy.textContent = ['(≧∇≦)ﾉ','⚡','❤','✨','★', '(●ˊωˋ●)', 
                   '(ノ°ο°)ノ', '(ﾉ´ヮ`)ﾉ*: ･ﾟ', '(●ˇ∀ˇ●)'][Math.floor(Math.random()*6)];
            
            // 随机位置
            const x = Math.random() * (gameContainer.offsetWidth - config.enemySize);
            enemy.style.left = `${x}px`;
            enemy.style.top = `-${config.enemySize}px`;
            
            gameContainer.appendChild(enemy);
            
            enemies.push({
                element: enemy,
                x: x,
                y: -config.enemySize,
                speed: config.enemySpeed * (0.8 + Math.random() * 0.4)
            });
        }
        
        // 射击功能
        function shoot() {
            if (!gameActive || projectiles.length >= config.maxProjectiles) return;
            
            const currentTime = Date.now();
            if (currentTime - lastShot < shotCooldown) return;
            lastShot = currentTime;
            
            const projectile = document.createElement('div');
            projectile.className = 'projectile';
            
            const paddleRect = paddle.getBoundingClientRect();
            const containerRect = gameContainer.getBoundingClientRect();
            
            const x = paddleRect.left - containerRect.left + paddle.offsetWidth/2 - 4;
            const y = paddleRect.top - containerRect.top - 20;
            
            projectile.style.left = `${x}px`;
            projectile.style.top = `${y}px`;
            
            gameContainer.appendChild(projectile);
            
            projectiles.push({
                element: projectile,
                x: x,
                y: y,
                speed: config.projectileSpeed
            });
        }
        
        // 创建爆炸效果
        function createExplosion(x, y, size) {
            const explosion = document.createElement('div');
            explosion.className = 'explosion';
            explosion.style.width = `${size}px`;
            explosion.style.height = `${size}px`;
            explosion.style.left = `${x - size/2}px`;
            explosion.style.top = `${y - size/2}px`;
            
            gameContainer.appendChild(explosion);
            
            setTimeout(() => {
                explosion.remove();
            }, 500);
        }
        
        // 游戏主循环
        function gameLoop() {
            if (!gameActive) return;
            
            // 更新子弹位置
            projectiles.forEach((projectile, index) => {
                projectile.y -= projectile.speed;
                projectile.element.style.top = `${projectile.y}px`;
                
                // 超出屏幕移除
                if (projectile.y < -20) {
                    projectile.element.remove();
                    projectiles.splice(index, 1);
                }
            });
            
            // 更新敌机位置
            enemies.forEach((enemy, index) => {
                enemy.y += enemy.speed;
                enemy.element.style.top = `${enemy.y}px`;
                
                // 检测敌机碰撞
                if (checkCollision(enemy)) {
                    // 扣减生命值
                    health -= 10;
                    healthFill.style.width = `${health}%`;
                    
                    // 爆炸效果
                    const enemyRect = enemy.element.getBoundingClientRect();
                    createExplosion(enemyRect.left + enemyRect.width/2, 
                                   enemyRect.top + enemyRect.height/2, 
                                   config.enemySize * 1.5);
                    
                    // 移除敌机
                    enemy.element.remove();
                    enemies.splice(index, 1);
                    
                    // 检测游戏结束
                    if (health <= 0) {
                        health = 0;
                        gameOver();
                    }
                }
                
                // 检测敌机是否超出底部
                if (enemy.y > gameContainer.offsetHeight) {
                    enemy.element.remove();
                    enemies.splice(index, 1);
                }
            });
            
            // 检测子弹与敌机的碰撞
            projectiles.forEach((projectile, pIndex) => {
                enemies.forEach((enemy, eIndex) => {
                    if (checkProjectileCollision(projectile, enemy)) {
                        // 增加分数
                        score += 10;
                        scoreDisplay.textContent = `得分: ${score}`;
                        
                        // 爆炸效果
                        const enemyRect = enemy.element.getBoundingClientRect();
                        createExplosion(
                            enemyRect.left + enemyRect.width/2, 
                            enemyRect.top + enemyRect.height/2, 
                            config.enemySize
                        );
                        
                        // 移除敌机和子弹
                        enemy.element.remove();
                        enemies.splice(eIndex, 1);
                        projectile.element.remove();
                        projectiles.splice(pIndex, 1);
                    }
                });
            });
            
            animationId = requestAnimationFrame(gameLoop);
        }
        
        // 检测敌机与挡板碰撞
        function checkCollision(enemy) {
            const paddleRect = paddle.getBoundingClientRect();
            const enemyRect = enemy.element.getBoundingClientRect();
            
            return (
                enemyRect.bottom >= paddleRect.top &&
                enemyRect.top <= paddleRect.bottom &&
                enemyRect.right >= paddleRect.left &&
                enemyRect.left <= paddleRect.right
            );
        }
        
        // 检测子弹与敌机碰撞
        function checkProjectileCollision(projectile, enemy) {
            const projectileRect = projectile.element.getBoundingClientRect();
            const enemyRect = enemy.element.getBoundingClientRect();
            
            return (
                projectileRect.bottom >= enemyRect.top &&
                projectileRect.top <= enemyRect.bottom &&
                projectileRect.right >= enemyRect.left &&
                projectileRect.left <= enemyRect.right
            );
        }
        
        // 游戏结束
        function gameOver() {
            gameActive = false;
            cancelAnimationFrame(animationId);
            clearInterval(spawnTimer);
            
            finalScoreDisplay.textContent = score;
            gameOverScreen.style.display = 'block';
        }
        
        // 鼠标移动控制挡板
        gameContainer.addEventListener('mousemove', (e) => {
            if (!gameActive) return;
            
            const containerRect = gameContainer.getBoundingClientRect();
            const x = e.clientX - containerRect.left - config.paddleWidth / 2;
            
            // 限制在容器内
            const maxX = containerRect.width - config.paddleWidth;
            paddle.style.left = `${Math.max(0, Math.min(x, maxX))}px`;
        });
        
        // 鼠标点击射击
        gameContainer.addEventListener('click', () => {
            shoot();
        });
        
        // 按钮事件
        restartBtn.addEventListener('click', initGame);
        playAgainBtn.addEventListener('click', initGame);
        
        // 开始游戏
        initGame();
    </script>
</body>
</html>
